<template>
	 <view class="u-checkbox center" :class="{'checked':checked}" @tap="change">
		 <image :src="src"></image>
	 </view>
</template>

<script>
	export default{
		props:{
			checked:{
				type:Boolean,
				default:false
			},			
		},
		
		data(){
			return{
				src:''
			}
		},
				
		methods:{
			 change(){
				 let val = !this.checked ? 1 : 0
				 this.$emit("change",val)
			 }
		}
	}
</script>

<style lang="less" scoped>
	.u-checkbox{ width:32rpx; height:32rpx; border-radius:5rpx; border:1px solid #ddd; transition:all 0.3s ease;
	  image{ width:20rpx; height:20rpx; opacity:0; transform: scale(0); transition:all 0.3s ease; }
		&.checked{ border:1px solid #1479FC; background-size:10rpx center; background:#1479FC;
			image{opacity:1; transform: scale(1);}
		}
	}
</style>
